<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>04.lifecycle</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <!-- TODO:理解每个生命周期钩子函数可以做的工作内容 -->
            <h1 ref="title">{{title}}</h1>
            <button @click="title = 'changed'">修改标题</button>
            <button @click="destoryVM">删除当前实例</button>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false;
            new Vue({
                el: '#app',
                data: {
                    title: 'The VueJs Instance',
                },
                beforeCreate: function() {
                    console.log('beforeCreate()');
               
                },
                created: function () {
                    console.log('created()');
                }, 
                 
                // 生命周期钩子函数的位置与methods是并列的
                methods: {
                    destoryVM() {
                        // ! $destroy是实例的方法
                        this.$destroy();
                    },
                },
            });
        </script>
    </body>
</html>
